<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            // el: '#app',
            data: {
                message: '李依若'
            },
            beforeCreate() {
                console.log('beforeCreate()', this.$el, this.$data)
            },
            created() {
                // 已初始化 data 数据，但数据未挂载到模板中 
                console.log('created()', this.$el, this.$data)
            },
            beforeMount() {
                // 模板已获取到，但是数据未挂载到模板上 
                console.log('beforeMount()', this.$el, this.$data)
            },
            mounted() {
                // 编译完成 ，数据已挂载到模板中 
                console.log('mounted()', this.$el, this.$data)
            },
            beforeUpdate() {
                // 当 data 改变后，去更新模板中的数据前调用
                // 注意:浏览器问题，需使用 this.$el.innerHTML 获取更新前的 Dom 模板数据 
                console.log('beforeUpdate()', this.$el.innerHTML, this.$data)
            },
            updated() {
                // data 被 Vue 渲染之后的 Dom 数据模板 
                console.log('updated()', this.$el.innerHTML, this.$data)
            },
            beforeDestroy() {
                // 销毁实例前调用
                console.log('beforeDestroy()')
            },
            destroyed() {
                // 销毁实例后调用
                console.log('created()')
            }
        }).$mount('#app')
        vm.$destroy() //销毁 Vue 实例
    </script>
</body>

</html>